import React from 'react';
import { Form, Col, Row, Input, Radio } from 'antd';
import { useModel } from 'umi';
import CommonModalForm from '@/components/CommonModalForm';
import './index.less';
// const { Option } = Select;

export type TemplateOption = {
  id: string;
  name: string;
  type: number;
  pageData: string; // 页面数据
  thumbnail: string; // 缩略图
};

type TProps = {
  visible: boolean;
  confirmLoading: boolean;
  operInfo?: any;
  operTitle?: string;
  selected: number | string;
  templateList: TemplateOption[];
  onSubmit: TAnyFunction;
  onCancel: TAnyFunction;
  onSelect: TAnyFunction;
};

const AddPageModal: React.FC<TProps> = (props) => {
  const {
    visible,
    confirmLoading,
    onCancel,
    onSubmit,
    operTitle,
    selected,
    onSelect,
    templateList,
  } = props;

  const [newList, setNewList] = React.useState<any[]>([
    {
      id: '0',
      name: '',
      pageData: '',
      thumbnail: '',
      type: 1,
    },
  ]);

  const [form] = Form.useForm();
  const { initialState } = useModel('@@initialState');
  const { imgPrefix } = initialState || {};

  // const data = [
  //   {
  //     id: '0',
  //     name: '',
  //     pageData: '',
  //     thumbnail: '',
  //     type: 1,
  //   },
  // ];

  React.useEffect(() => {
    if (templateList.length > 0) {
      setNewList(newList.concat(templateList));
    }
  }, [templateList]);

  const handleSelect = (item: any) => {
    form?.setFieldValue(['template'], item.id);
    onSelect(item.id);
  };

  return (
    <CommonModalForm
      formRef={form}
      visible={visible}
      confirmLoading={confirmLoading}
      okText={operTitle === 'add' ? '创建' : '编辑'}
      title={operTitle === 'add' ? '新建页面' : '编辑页面'}
      onSubmit={onSubmit}
      onCancel={onCancel}
      width={1080}
      formProps={{
        layout: 'vertical',
        autoComplete: 'off',
      }}
    >
      <Row justify="start">
        <Col span={16}>
          <div className="chooseTemplate">
            <Form.Item
              name="template"
              label="选择模板"
              rules={[
                {
                  required: true,
                  message: '请选择模板',
                },
              ]}
            >
              <div className="chooseTemplateBox">
                {newList.map((item: TemplateOption) => (
                  <div
                    className={`chooseTemplateItem ${item.id === selected && 'selectItem'}`}
                    onClick={() => handleSelect(item)}
                  >
                    {item.thumbnail && (
                      <img
                        className="chooseTemplateItemImg"
                        src={`${imgPrefix}${item.thumbnail}`}
                      />
                    )}
                    {!item.thumbnail && <span className="chooseTemplateItemUnit">+</span>}
                    {!item.thumbnail && <span className="chooseTemplateItemText">空白模板</span>}
                  </div>
                ))}
              </div>
            </Form.Item>
          </div>
        </Col>
        <Col span={8}>
          <div className="formInfo">
            <Form.Item
              name="name"
              label="页面名称"
              rules={[
                {
                  required: true,
                  message: '请输入页面名称',
                },
              ]}
            >
              <Input showCount maxLength={20} placeholder="请输入页面名称，长度不超过20个文案" />
            </Form.Item>
            <Form.Item
              name="channel"
              label="使用渠道"
              rules={[
                {
                  required: true,
                  message: '请选择渠道',
                },
              ]}
            >
              <Radio.Group>
                <Radio value="0002">微信小程序</Radio>
                <Radio value="0003">H5</Radio>
              </Radio.Group>
            </Form.Item>
          </div>
        </Col>
      </Row>
    </CommonModalForm>
  );
};

export default AddPageModal;
